$primary-color: #fff; // 内容底色
$inner-color: #f5f5f5; // 基础底色
$btn-bg: #2a98ff; // 按钮色
$less-btn-bg: #e7f1ff; //次按钮色
$dark-fg: #e7e7e7; // 深前景色
$font-default-color: #333; // 字体默认颜色
$font-dark-color: #666; // 字体暗色
$font-grey-color: #999; // 字体浅暗色
$font-white-color: #fff; // 字体白色
$font-placeholder-color: #d4d4d4; // placeholder颜色
$border-dark-color: #dcdcdc; // 边框默认暗色
$important-color: #ee0909; // 强调色
$less-important-color: #ee0909; // 次强调色
$warning-color: #ffde48; // 警告色
$shadow-beauty-color: rgba(42, 152, 255, 0.35); // 边框阴影色
$shadow-default-color: rgba(178, 178, 178, 0.35); // 边框默认阴影色
$linear-start-color: #528ffd;
$linear-end-color: #2f64fe;

[data-theme="default"] {
	html,
	body {
		background-color: $inner-color;
	}
	.bg-color {
		background: $primary-color;
	}
	.bg-opacity-color {
		background: rgba(255, 255, 255, 0.3);
	}
	.fg-color {
		background: $inner-color;
	}
	.dark-fg-color {
		background: $dark-fg;
	}
	.btn-bg-color {
		background: $btn-bg;
	}
	.btn-grey-bg-color {
		background: $font-grey-color;
	}
	.less-btn-bg-color {
		background-color: $less-btn-bg;
	}
	.btn-text-color {
		color: $btn-bg;
	}
	.font-default-color {
		color: $font-default-color;
	}
	.font-dark-color {
		color: $font-dark-color;
	}
	.font-grey-color {
		color: $font-grey-color;
	}
	.font-white-color {
		color: $primary-color;
	}
	.font-tip-color {
		color: $warning-color;
	}
	.important-text-color {
		color: $important-color;
	}
	.important-bg-color {
		background: $important-color;
	}
	.border-black-color {
		border-color: $font-grey-color;
	}
	.border-dark-color {
		z-index: 100;
		border-color: $border-dark-color;
	}
	.border-beauty-color {
		border-color: $btn-bg;
	}
	.border-white-color {
		border-color: $primary-color;
	}
	.show-placeholder {
		color: $font-placeholder-color !important;
	}
	input::-webkit-input-placeholder {
		color: $font-grey-color !important;
	}

	.plate-item-shadow {
		box-shadow: 0px 0px 10px 0px rgba(133, 133, 133, 0.35);
	}

	// vant dialog 文字颜色
	.confirm-tip {
		color: $font-dark-color;
	}

	// component keyBoard
	.is-touch {
		background: $font-grey-color !important;
		color: $font-white-color;
	}

	.payment-tip-bg {
		background: linear-gradient(
			to right,
			$linear-start-color,
			$linear-end-color
		);
	}
}
